<script setup lang="ts">
import { ref } from "vue";
import type { FormDesignerComponents } from "../FormComponentMixin";
import CommonConfig from "./CommonConfig.vue";
import CodeEdit from "@/components/codeEditor.vue";
const config = defineModel<FormDesignerComponents>("config");
const codeEditRef = ref(null);
const codeEditVisiable = ref(false);
const eventCodeTitle = ref("事件");
const propsCollapse = ref("0");
const handleOpenCodeEdit = eventName => {
  eventCodeTitle.value = eventName + "事件";
  codeEditVisiable.value = true;
};

const handleConfirmCodeEdit = () => {
  codeEditVisiable.value = false;
  console.log(config.value.props.event?.onClick);
};
</script>

<template>
  <el-collapse v-model="propsCollapse" accordion>
    <el-collapse-item name="0">
      <template #title>
        <div class="collapse-title">
          <el-icon color="#1890ff"><List /></el-icon>
          <div>基本属性</div>
        </div>
      </template>
      <CommonConfig v-model:config="config" />
      <el-form-item label="按钮文字">
        <el-input v-model="config.props.placeholder" placeholder="输入提示" />
      </el-form-item>
      <el-form-item label="按钮类型">
        <el-radio-group v-model="config.props.type">
          <el-radio label="primary" value="primary" />
          <el-radio label="success" value="success" />
          <el-radio label="warning" value="warning" />
          <el-radio label="danger" value="danger" />
          <el-radio label="info" value="info" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="圆形按钮">
        <el-switch v-model="config.props.circle" />
      </el-form-item>
    </el-collapse-item>
    <el-collapse-item name="1">
      <template #title>
        <div class="collapse-title">
          <el-icon color="#1890ff"><Ticket /></el-icon>
          <div>事件属性</div>
        </div>
      </template>
      <el-form-item label="点击事件">
        <el-radio-group v-model="config.props.action.type">
          <el-radio label="执行onClick" value="2" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="onClick" v-if="config.props.action.type === '2'">
        <el-button
          type="primary"
          icon="Edit"
          size="small"
          round
          @click="handleOpenCodeEdit('click')"
        >
          编写代码
        </el-button>
      </el-form-item>
    </el-collapse-item>
  </el-collapse>
  <CommonDialog
    v-model="codeEditVisiable"
    :title="eventCodeTitle"
    @cancel="codeEditVisiable = false"
    @ok="handleConfirmCodeEdit"
  >
    <CodeEdit ref="codeEditRef" v-model="config.props.event.onClick" />
  </CommonDialog>
</template>

<style lang="scss" scoped>
.collapse-title {
  padding: 0px 5px;
  display: flex;
  align-items: center;

  & > div {
    margin-left: 10px;
  }
}
</style>
